<template>
  <div class="winPanel kkModule noBlueBg">
    <div class="title">
      <span class="video button" :class="{active:mode==='video'}" @click="mode='video'" v-if="data.livePath">视频</span>
      <span class="video button" :class="{active:mode==='video'}" @click="mode='video'" v-if="data.videoPath">视频</span>
      <span class="image button" :class="{active:mode==='image'}" @click="mode='image'" v-if="data.imagePath">图片</span>
      <span class="close" @click="closePanel" title="关闭面板">×</span>
    </div>
    <div class="content">
      <div class="win" v-if="data['type']==='event'">
        <div class="video" v-show="mode==='video'" v-if="data.videoPath">
          <video :src="webCfg.api.url+':'+webCfg.api.fileSvrPort+'/'+data.videoPath" autoplay controls loop
                 style="width: 100%; height: 100%;"></video>
        </div>
        <div class="image fitContain" v-show="mode==='image'" v-if="data.imagePath">
          <img :src="webCfg.api.url+':'+webCfg.api.fileSvrPort+'/'+data.imagePath" @click="viewBigImg($event)">
        </div>
      </div>
      <div class="win" v-else>
        <div class="video" v-show="mode==='video'" v-if="data.livePath && webCfg.lineMode!==1">
          <FlvPlayer :url="data.livePath"></FlvPlayer>
        </div>
        <div class="video" v-show="mode==='video'" v-if="data.livePath && webCfg.lineMode===1">
          <video :src="webCfg.api.url+':'+webCfg.api.fileSvrPort+'/'+data.livePath" autoplay controls loop
                 style="width: 100%; height: 100%;"></video>
        </div>

        <div class="image fitContain" v-show="mode==='image'" v-if="data.imagePath">
          <img :src="webCfg.api.url+':'+webCfg.api.fileSvrPort+'/'+data.imagePath" @click="viewBigImg($event)">
        </div>
      </div>
      <div class="cont" v-if="data['type']==='event'">
        <ul>
          <li v-for="item in data.items" :class="item.key" :key="item.key">
            <label>{{item.label}}：</label>
            <span v-html="item.value"></span>
          </li>
          <li class="btn">
            <el-button type="primary" size="mini" v-if="curEvtState===1" @click="handleEvt(data.state)">稽 核</el-button>
            <el-button type="success" size="mini" v-if="curEvtState===2" @click="handleEvt(data.state,1)">发 布
            </el-button>
            <el-button type="warning" size="mini" v-if="curEvtState===2" @click="handleEvt(data.state,0)">忽 略
            </el-button>
          </li>
        </ul>
        <Dialog :cfg="dialogCfg" ref="dialog">
          <div v-if="data.state===1">
            <el-form ref="fun1Form" label-width="70px" :model="form1Data">
              <el-form-item label="更改：">
                <el-select v-model="form1Data.evtType" placeholder="请选择" size="mini">
                  <el-option
                    v-for="(label,value) in evtTypes"
                    :key="value"
                    :label="label"
                    :value="value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="备注：">
                <el-input v-model="form1Data.note" placeholder="请输入备注内容" size="mini"></el-input>
              </el-form-item>
            </el-form>
          </div>
          <div v-if="data.state===2">
            <el-form ref="fun1Form" label-width="120px">
              <el-form-item label="消息推送：">
                <el-select v-model="curUnit" placeholder="请选择单位" size="mini" @change="changeUnit">
                  <el-option
                    v-for="item in units"
                    :key="item"
                    :label="item"
                    :value="item">
                  </el-option>
                </el-select>

                <el-select v-model="curDepartment" placeholder="请选择部门" size="mini" class="ml10"
                           @change="changeDepartment">
                  <el-option
                    v-for="item in departments"
                    :key="item"
                    :label="item"
                    :value="item">
                  </el-option>
                </el-select>

                <el-select v-model="receive" placeholder="请选择人员" size="mini">
                  <el-option
                    v-for="item in receives"
                    :key="item.id"
                    :label="item.trueName"
                    :value="item.mobile">
                  </el-option>
                </el-select>

              </el-form-item>
              <el-form-item label="抄送省网平台：">
                <el-switch v-model="sendBaseFlag"></el-switch>
              </el-form-item>
            </el-form>
          </div>
        </Dialog>


      </div>
      <div class="cont" v-else>
        <ul>
          <li v-for="item in data.items" :class="item.key" :key="item.key">
            <label>{{item.label}}：</label>
            <span v-html="item.value"></span>
          </li>
          <li class="btn">
            <el-button type="primary" size="mini" v-if="data.state!=='0'" @click="sendRepairOrder">派 单</el-button>
          </li>
        </ul>
        <Dialog :cfg="dialogCfg" ref="dialog">
          <el-form label-width="120px">
            <el-form-item label="选择人员：">
              <el-select v-model="curUnit" placeholder="请选择单位" size="mini" @change="changeUnit">
                <el-option
                  v-for="item in units"
                  :key="item"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>

              <el-select v-model="curDepartment" placeholder="请选择部门" size="mini" class="ml10"
                         @change="changeDepartment">
                <el-option
                  v-for="item in departments"
                  :key="item"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>

              <el-select v-model="receive" placeholder="请选择人员" size="mini">
                <el-option
                  v-for="item in receives"
                  :key="item.id"
                  :label="item.trueName"
                  :value="item.mobile">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </Dialog>
      </div>
    </div>
    <div class="kkModule-sub"></div>
  </div>
</template>

<script>
  import Dialog from 'comp/common/Dialog.vue';
  import FlvPlayer from "kkui/video/FlvPlayer";

  export default {
    name: "WinPanel",
    components: {
      Dialog,
      FlvPlayer
    },
    props: {
      closePanel: {
        default: () => {
        },
        type: Function
      },
      data: {
        default: {},
        type: Object
      }
    },
    data() {
      return {
        mode: 'video',
        webCfg: WebCfg,
        dict: this.$kkui.cache.get('dict'),


        dialogCfg: {
          width: 600,
          height: 400,
          title: '',
          closeShow: !!1,
          footerShow: !!1,
          submit: () => {
          }
        },
        curEvtState: 0,
        evtType: '',
        note: '',
        evtTypes: '',
        status: '',

        units: [],
        curUnit: '',
        departments: [],
        curDepartment: '',
        receive: '',
        receives: [],
        sendBaseFlag: true,


        form1Data: {
          evtType: '',
          note: ''
        }


      }
    },
    created() {
      this.evtTypes = this.dict['event'];
      this.status = this.dict['status'];
    },
    watch: {
      data: {
        handler: function (n, o) {
          this.curEvtState = n.preData.state;
        }
      }
    },
    methods: {
      viewBigImg(e) {
        this.$kkui.dialog({
          width: '90%',
          height: '90%',
          cont: `<img src="${e.currentTarget.getAttribute('src')}" style="width:100%; height100%;object-fit:contain;" />`
        })
      },
      // 处理事件
      handleEvt(status, flag) {
        if (this.data.preData) {
          this.form1Data.evtType = this.data.preData.eventTypeTwoCode;
        }

        const do1 = () => { // 稽核
          this.$refs.dialog.show = true;
          this.evtType = this.data.code;
          this.dialogCfg.width = 287;
          this.dialogCfg.height = 220;
          this.dialogCfg.title = '稽核';
          this.dialogCfg.submit = () => {
            this.$kkui.alert({
              icon: 0,
              cont: '确定稽核此事件类型吗？',
              callback: () => {

                this.$server('monitor.evtHandle.jihe', {
                  eventTypeTwoCode: this.form1Data.evtType,
                  note: this.form1Data.note,
                  id: this.data.id
                }).then(data => {
                  this.$kkui.msg({
                    icon: 1,
                    cont: '事件稽核成功！'
                  });
                  this.note = '';
                  this.$parent.delMarker && this.$parent.delMarker(this.data.id);
                  if (this.data.preData) {
                    const item = this.data.preData;
                    item.state = 2;
                    item.eventTypeTwoCode = this.evtType;
                    const camera = item['bscCamera'];
                    if (camera) {
                      const id = item.id,
                        code = item['eventTypeTwoCode'],
                        color = WebCfg.eventColor[code],
                        gis = [camera['longitude'], camera['latitude']];
                      let name = this.dict['event'][code];
                      name = name.indexOf('-') > -1 ? name.split('-')[1] : name;

                      this.$parent.addMarker && this.$parent.addMarker({
                        type: 'event',
                        id,
                        name,
                        color,
                        gis,
                        icon: require(`@/assets/img/common/icon/event_${color}.png`),
                        data: {
                          preData: item,
                          id,
                          type: 'event',
                          videoPath: item.videoPath,
                          imagePath: item.imgPath,
                          event: item.code,
                          state: item.state,
                          items: [
                            {
                              key: 'type',
                              label: '类型',
                              value: name,
                              color
                            },
                            {
                              key: 'state',
                              label: '状态',
                              value: this.dict['status'][item.state],
                              color
                            },
                            {
                              key: 'road',
                              label: '路段',
                              value: camera['road'],
                              color
                            },
                            {
                              key: 'pos',
                              label: '位置',
                              value: camera['name'],
                              color
                            }
                          ]
                        },
                      });
                    }
                  }
                  if (typeof this.data.callback === 'function') this.data.callback();
                  this.$refs.dialog.show = false;

                  this.evtType=2;
                  // this.closePanel();
                })
              }
            })
          };
        };

        const do2 = () => { // 忽略
          if (flag) {
            this.$server('org.company').then(data => {
              this.units = data;
              this.$refs.dialog.show = true;
              this.evtType = this.data.code;
              this.dialogCfg.width = 550;
              this.dialogCfg.height = 250;
              this.dialogCfg.title = '发布';
              this.dialogCfg.submit = () => {
                if (!this.receive) {
                  this.$kkui.msg({
                    icon: 0,
                    cont: '必须选择消息推送的人员！'
                  })
                } else {
                  this.$kkui.alert({
                    icon: 0,
                    cont: '确定发布此事件吗？',
                    callback: () => {
                      this.$server('monitor.evtHandle.fabu', {
                        pushInterface: false,
                        mobile: this.receive,
                        id: this.data.id,
                        state: 3
                      }).then(data => {
                        this.$kkui.msg({
                          icon: 1,
                          cont: '事件发布成功！'
                        });
                        this.receive = '';
                        this.receives = [];
                        this.curDepartment = '';
                        this.departments = [];
                        this.units = [];
                        this.curUnit = '';

                        if (typeof this.data.callback === 'function') this.data.callback();

                        this.$parent.delMarker && this.$parent.delMarker(this.data.id);


                        if (this.data.preData) {
                          const item = this.data.preData;
                          item.state = 3;

                          const camera = item['bscCamera'];
                          if (camera) {
                            const id = item.id,
                              code = item['eventTypeTwoCode'],
                              color = WebCfg.eventColor[code],
                              gis = [camera['longitude'], camera['latitude']];

                            let name = this.dict['event'][code];
                            name = name.indexOf('-') > -1 ? name.split('-')[1] : name;
                            this.$parent.addMarker({
                              type: 'event',
                              id,
                              name,
                              color,
                              gis,
                              icon: require(`@/assets/img/common/icon/event_${color}.png`),
                              data: {
                                preData: item,
                                id,
                                type: 'event',
                                videoPath: item.videoPath,
                                imagePath: item.imgPath,
                                event: item.code,
                                state: item.state,
                                items: [
                                  {
                                    key: 'type',
                                    label: '类型',
                                    value: name,
                                    color
                                  },
                                  {
                                    key: 'state',
                                    label: '状态',
                                    value: this.dict['status'][item.state],
                                    color
                                  },
                                  {
                                    key: 'road',
                                    label: '路段',
                                    value: camera['road'],
                                    color
                                  },
                                  {
                                    key: 'pos',
                                    label: '位置',
                                    value: camera['name'],
                                    color
                                  }
                                ]
                              },

                            });
                          }
                        }
                        if (typeof this.data.callback === 'function') this.data.callback();

                        this.$refs.dialog.show = false;
                        this.closePanel();
                      })
                    }
                  })

                }
              };
            });
          } else {
            this.$kkui.alert({
              icon: 0,
              cont: '确定忽略发布此事件吗？',
              callback: () => {
                this.$server('monitor.evtHandle.fabu', {
                  id: this.data.id,
                  state: 4,
                  pushInterface: false
                }).then(data => {
                  this.$kkui.msg({
                    icon: 1,
                    cont: '事件忽略成功！'
                  });
                  this.$refs.dialog.show = false;
                  this.$parent.delMarker && this.$parent.delMarker(this.data.id);

                  if (this.data.preData) {
                    const item = this.data.preData;
                    item.state = 4;

                    const camera = item['bscCamera'];
                    if (camera) {
                      const id = item.id,
                        code = item['eventTypeTwoCode'],
                        color = WebCfg.eventColor[code],
                        gis = [camera['longitude'], camera['latitude']];

                      let name = this.dict['event'][code];
                      name = name.indexOf('-') > -1 ? name.split('-')[1] : name;
                      this.$parent.addMarker({
                        type: 'event',
                        id,
                        name,
                        color,
                        gis,
                        icon: require(`@/assets/img/common/icon/event_${color}.png`),
                        data: {
                          preData: item,
                          id,
                          type: 'event',
                          videoPath: item.videoPath,
                          imagePath: item.imgPath,
                          event: item.code,
                          state: item.state,
                          items: [
                            {
                              key: 'type',
                              label: '类型',
                              value: name,
                              color
                            },
                            {
                              key: 'state',
                              label: '状态',
                              value: this.dict['status'][item.state],
                              color
                            },
                            {
                              key: 'road',
                              label: '路段',
                              value: camera['road'],
                              color
                            },
                            {
                              key: 'pos',
                              label: '位置',
                              value: camera['name'],
                              color
                            }
                          ]
                        },

                      });
                    }
                  }


                  if (typeof this.data.callback === 'function') this.data.callback();
                  this.closePanel();
                })
              }
            })
          }
        };

        [do1, do2][status - 1]();
      },

      changeUnit() {
        this.$server('org.department', {
          company: this.curUnit,
        }).then(data => {
          this.curDepartment = '';
          this.receive = '';
          this.departments = data;
        })
      },

      changeDepartment() {
        this.$server('org.user', {
          company: this.curUnit,
          department: this.curDepartment
        }).then(data => {
          this.receive = '';
          this.receives = data;
        })
      },

      sendRepairOrder() {
        this.$server('org.company').then(data => {
          this.units = data;
          this.$refs.dialog.show = true;
          this.dialogCfg.width = 550;
          this.dialogCfg.height = 200;
          this.dialogCfg.title = '派单';
          this.dialogCfg.submit = () => {
            if (!this.receive) {
              this.$kkui.msg({
                icon: 0,
                cont: '人员尚未选择！'
              })
            } else {
              this.$kkui.alert({
                icon: 0,
                cont: '确定派单维修吗？',
                callback: () => {
                  this.$kkui.msg({
                    icon: 1,
                    cont: '派单成功！'
                  });
                  this.receive = '';
                  this.receives = [];
                  this.curDepartment = '';
                  this.departments = [];
                  this.units = [];
                  this.curUnit = '';
                  this.closePanel();
                }
              });
            }
          };
        });
      },
    },
    beforeDestroy() {
      const videos = document.querySelectorAll('video');
      if (videos.length > 0) {
        videos.forEach(video => {
          video.currentTime = 0.0;
          video.pause();

          video.setAttribute('src', '');
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .winPanel {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -300px;
    margin-top: -126px;
    border: 1px solid rgba(10, 183, 255, .48);
    background-color: rgba(6, 29, 47, .95);
    width: 600px;
    height: 246px;
    z-index: 100;
    box-sizing: border-box;

    .title {
      height: 24px;
      line-height: 24px;
      margin: 0 15px;
      padding: 10px 0;
      border-bottom: 1px solid rgba(10, 183, 255, .1);
      display: flex;

      .button {
        width: 80px;
        height: 24px;
        background: url("~img/common/panel_title_bg.png") center center no-repeat;
        opacity: .3;
        text-align: center;
        font-size: 13px;
        color: #ccc;
        cursor: pointer;
      }

      .button.active, .button:hover {
        opacity: .8;
      }

      .close {
        margin-left: auto;
        color: var(--menu-border-color);
        font-size: 18px;
        cursor: pointer;
        opacity: .5;
        border: 2px solid var(--menu-border-color);
        height: 20px;
        line-height: 18px;
        width: 20px;
        text-align: center;
        border-radius: 50%;
        transition: all .2s ease-in-out;
      }

      .close:hover {
        opacity: 1;
        transform: rotate(90deg);
      }

    }

    .content {
      padding: 15px;
      display: flex;
      gap: 20px;

      .win {
        width: calc(160px * 1.9);
        height: calc(90px * 1.9);
        background-color: rgba(0, 0, 0, .5);
        box-sizing: border-box;
        cursor: pointer;

        .video, .image, .video video, .image img {
          width: 100%;
          height: 100%;
        }
      }

      .cont {
        flex: 1;
        font-size: 14px;
        color: #999;
        overflow: hidden;

        li {
          list-style: disc;
          margin-left: 10px;
          line-height: 26px;
          border-bottom: 1px dashed rgba(10, 183, 255, .1);
          overflow: hidden;
          display: flex;

          label {
            opacity: .5;
            color: #aaa;
            width: 50px;
          }

          span {
            flex: 1;
          }

          .red {
            color: red
          }
        }

        li.state {
          color: var(--font-blue-color);
        }

        li:last-child {
          list-style: none;
          border-bottom: none;
          padding-top: 5px;
        }

        li.btn {
          display: flex;
          gap: 20px;
          justify-content: space-between;
          height: 30px;
          line-height: 30px;

          button {
            flex: 1;
            font-size: 14px;
          }
        }

      }
    }


    /deep/ .el-form-item {
      margin-bottom: 10px;
    }
  }


</style>
